import React, { Component } from 'react';
import TodoListUi from './TodoListUi'
import store from './store'
import { getMyListAction, changeInputAction, addItemAction, deleteItemAction, getTodoList } from './store/actionCreators'

class TodoList extends Component {
    constructor(props) {
        super(props);
        this.state = store.getState()
        this.changeInputValue = this.changeInputValue.bind(this)
        this.storeChange = this.storeChange.bind(this);
        this.clickBtn = this.clickBtn.bind(this);
        this.deleteItem = this.deleteItem.bind(this);
        store.subscribe(this.storeChange);
    }
    componentDidMount() {
        /*  axios.get('https://www.easy-mock.com/mock/5a31238a7ea45c08a5db77c6/example/getList').then(res => {
             console.log(res)
             const data = res.data;
             const action = getListAction(data);
             store.dispatch(action);
         }) */
        /* const action = getTodoList();
        store.dispatch(action) */
        const action = getMyListAction()
        store.dispatch(action);
        console.log(action);
    }
    storeChange() {
        this.setState(store.getState())
    }
    changeInputValue(e) {
        const action = changeInputAction(e.target.value);
        store.dispatch(action)
    }
    clickBtn() {
        const action = addItemAction();
        store.dispatch(action);
    }
    deleteItem(index) {
        const action = deleteItemAction(index);
        store.dispatch(action);
    }
    render() {
        return (
            <TodoListUi
                inputValue={this.state.inputValue}
                placeholder={this.state.placeholder}
                list={this.state.list}
                changeInputValue={this.changeInputValue}
                clickBtn={this.clickBtn}
                deleteItem={this.deleteItem}
            />
        );
    }
}

export default TodoList;